<script setup lang="ts">
import tree from "./tree.vue";
import { useLmsStoreHook } from "@/store/modules/lms";
import { useCourse } from "./table";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";

const lmsStore = useLmsStoreHook();

const isExistCourseware = (row: any) => {
  return lmsStore.pickCourseware.includes(row);
};

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  onSearch,
  resetForm,
  handleAdd,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useCourse();
</script>

<template>
  <el-dialog v-model="lmsStore.dialogForPickCourseware" title="挑选课件">
    <el-row>
      <el-col :span="7">
        <tree />
      </el-col>
      <el-divider direction="vertical" />
      <el-col :span="16">
        <div>
          <el-form
            ref="formRef"
            :inline="true"
            :model="form"
            class="bg-bg_color w-[99/100] pl-8 pt-4"
          >
            <el-form-item label="课程名称：" prop="username">
              <el-input
                v-model="form.name"
                placeholder="请输入课程名称"
                clearable
                class="!w-[160px]"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :icon="useRenderIcon(Search)"
                :loading="loading"
                @click="onSearch"
              >
                搜索
              </el-button>
              <el-button
                :icon="useRenderIcon(Refresh)"
                @click="resetForm(formRef)"
              >
                重置
              </el-button>
            </el-form-item>
          </el-form>
          <PureTableBar title="课程管理" @refresh="onSearch">
            <template v-slot="{ size, checkList }">
              <pure-table
                border
                align-whole="center"
                table-layout="auto"
                :loading="loading"
                :size="size"
                :data="dataList"
                :columns="columns"
                :checkList="checkList"
                :pagination="pagination"
                :paginationSmall="size === 'small' ? true : false"
                :header-cell-style="{
                  background: 'var(--el-table-row-hover-bg-color)',
                  color: 'var(--el-text-color-primary)'
                }"
                @selection-change="handleSelectionChange"
                @page-size-change="handleSizeChange"
                @page-current-change="handleCurrentChange"
              >
                <template #operation="{ row }">
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    @click="handleAdd(row)"
                    :disabled="isExistCourseware(row)"
                    :icon="useRenderIcon(EditPen)"
                  >
                    添加
                  </el-button>
                </template>
              </pure-table>
            </template>
          </PureTableBar>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style scoped></style>
